<template>
    <div>
        <ul class="nav">
            <li @click="handleClick" v-for="(item,index) of cities" :key="index">{{index}}</li>
        </ul>
    </div>
</template>
<script>
export default {
    name:"CityWord",
    props:['cities'],
    methods:{
        handleClick(event){
            // this.$store.dispatch("changeLetter",event.target.innerText);
            this.$store.commit("changeLetter",event.target.innerText)
        }
    }
}
</script>
<style lang="scss" scoped>
.nav{
    position: fixed;
    color: skyblue;
    display: flex;
    top: 400px;
    right: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>
